<template>
   <div class="todo-header">
          <input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="titles" @keyup.enter="enterClick" >
   </div>
</template>

<script lang="ts">
import { defineComponent,ref } from "vue";
export default defineComponent({
  name: "HelloWorld",
  props: {
   todoAdd:{
    type:Function,
    required:true
   },
  },
  setup(props){
    const titles = ref('')
    // 回车事件
    const enterClick =()=>{
      const text = titles.value
      if(!text) return 
        const todo = {
          id:Date.now(),
          title:text,
          isChecked:false
        }
        // 调用方法
        props.todoAdd(todo)
        titles.value=''
    }
    
    
    return{
      enterClick,
      titles,
    }
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.todo-header{
  input{
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}
</style>
